<template>
	<view class="contain-body">
		<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
			@cancel="cancel" placeholder="搜索宝贝,开启快乐分期生活" cancelButton="none" clearButton="none"> 
		</uni-search-bar>
		<view class="contentOverflow">
			<view class="Carousel">
				<uv-swiper :list="list" indicatorMode="line" height="160" imgMode=""></uv-swiper>
			</view>
			<view class="threeTab">
				<view class="threeTab-item" v-for="(item,index) in functionBoxList" :key="item.title"
					@click="goToItemPage(index)">
					<image :src="item.url" mode="" class="imageTab"></image>
					<text>{{item.title}}</text>
				</view>
			</view>
			<view class="New-product">
				<view class="productItem">
					<image :src="newImg" mode=""></image>
				</view>
				<view class="productItem productCloumn">
					<view class="productItem-1">
						<image :src="newImg1" mode=""></image>
					</view>
					<view class="productItem-1">
						<image :src="newImg2" mode=""></image>
					</view>
					<view class="productItem-1">
						<image :src="newImg" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="text-area"> 
			<text class="title">{{title}}</text>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	
	export default {

		data() {
			return {
				title: 'Hello',
				newImg:'/static/new1.png',
				newImg1:'/static/new2.png',
				newImg2:'/static/new3.png',
				functionBoxList: [{
						url: '/static/iphone15.png',
						title: '苹果旗舰'
					},
					{
						url: '/static/mianmo.png',
						title: '美容面膜'
					},
					{
						url: '/static/more.png',
						title: '更多新品',
					},
				],
				list:[
					'/static/lunbo1.png',
					'/static/lunbo2.png',
				],
				projectList:[],
			}
		},
		created() {
			let APP = getApp();
			var data = {};
			 let that = this,banner=[];
			 APP.http('post','/index',data,function(res){
				  if(res.code==1){
					for(let i=0;i<res.data.banner.length;i++){
					  banner.push({url:res.data.banner[i].banner_img})
					}
					// that.setData({
					//   background:banner,
					//   project:res.data.project
					// })
					that.projectList = res.data.project
				  }else{
					wx.showLoading({
					  title: '拼命加载中',
					})
				  }
				})
		},
		methods: {
			goToItemPage(index) {
				console.log('点击iten--', index)
				// uni.navigateTo({
				// 		url: "/pages/classify/phone-details"
				// 	})
				if (index == 0) {
					uni.navigateTo({
						url: "/pages/classify/phone-details"
					})
				}else if(index == 1){
					uni.navigateTo({
						url: "/pages/classify/phone-details"
					})
				}else if(index == 2){
					uni.navigateTo({
						url: "/pages/classify/classify"
					})
				}
				
			}

		}
	}
</script>

<style>
	.contentOverflow{
		
	}
	.New-product{
		padding: 0 10px;
		box-sizing: border-box;
		width: 100%;
		height: 250px;
		display: flex;
		justify-content: space-between;
	}
	.productCloumn{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.productItem-1{
		width: 100%;
		height: calc( 33% - 5px);
	}
	.productItem{
		width: calc( 50% - 5px);
		height: 100%;
	}
	.productItem image{
		width: 100%;
		height: 100%;
	}
	.Carousel {
		width: 100%;
		height: 160px;
	}

	.Carousel image {
		/* width: 100%; */
		height: 100%;
	}
	::v-deep .uni-searchbar__box{
		border-radius: 36px !important;
	}
	::v-deep .uni-searchbar{
		background-color: #FF8B07 !important;
		padding: 0 10px 5px 10px !important;
	}

	.threeTab {
		width: 100%;
		padding:  10px ;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.threeTab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #404040;
		margin-right: 20px;
	}
	.threeTab .threeTab-item:last-child{
		margin: 0px;
	}

	.threeTab-item .imageTab {
		width: 56px;
		height: 56px;
		background: linear-gradient(180deg, #FED9BF, #f38978);
		border-radius: 20px;
		padding: 5px;
		box-sizing: border-box;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	 

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
